<nz-tabset>
    <nz-tab nzTitle="产品分类">
        <ng-container  [ngTemplateOutlet]="tableTemplate" [ngTemplateOutletContext]="{ type:'ProductCatalog'}"></ng-container>
    </nz-tab>
</nz-tabset>

<ng-template #tableTemplate let-type="type">
    <div class="table-container" style="display: grid; grid-template-rows: auto 1fr; grid-gap: 10px; height: 100%;">
        <div class="table-container-header">
            <div></div>
            <nz-input-group [nzSuffix]="suffixIconSearch">
                <input type="text" nz-input placeholder="搜索" name="keyword" [(ngModel)]="keywords[type]" (ngModelChange)="search(type)"/>
            </nz-input-group>
            <ng-template #suffixIconSearch>
                <i nz-icon nzType="search"></i>
            </ng-template>
            <button nz-button nzType="primary" (click)="editor.create(config.getType(type))"><i nz-icon nzType="plus-square"></i>添加</button>
        </div>
        <div class="table-container-body">
            <nz-table #dataTable [nzFrontPagination]="true"
                      [nzData]="getCollection(type)" [nzShowPagination]="true" [nzPageSize]="10">
                <thead>
                <tr class="table-header">
                    <th style="width: 80px;">#</th>
                    <ng-container *ngFor="let meta of config.getColumns(type)">
                        <th style="width: auto;" [nzShowSort]="meta.sort"  [nzColumnKey]="meta.key">{{meta.alias}}</th>
                    </ng-container>
                    <th style="width: 80px;">操作</th>
                </tr>
                </thead>
                <tbody class="table-body">
                <tr class="table-row-hover" *ngFor="let item of dataTable.data; let i = index">
                    <td class="text-center table-item">{{(dataTable.nzPageIndex - 1) * dataTable.nzPageSize + i + 1}}</td>
                    <ng-container *ngFor="let meta of config.getColumns(type)">
                        <td class="text-center table-item">{{item[meta.key]}}</td>
                    </ng-container>
                    <td>
                        <div class="actions">
                            <button nz-button nzType="default" nz-tooltip nzTitle="查看" (click)="editor.show(item)">
                                <i nz-icon nzType="eye"></i>
                            </button>
                            <button nz-button nzType="default" nz-tooltip nzTitle="编辑" (click)="editor.edit(item)">
                                <i nz-icon nzType="edit"></i>
                            </button>
                            <button nz-button nzType="default" nz-tooltip nzTitle="删除" (click)="removeItem(item, type, dataTable.nzPageSize * (dataTable.nzPageIndex-1) + i )">
                                <i nz-icon nzType="delete"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
    <app-element-editor #editor (onCreate)="addItem($event, type)" (onEdit)="editItem($event, type)"></app-element-editor>
</ng-template>


